<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Customize Menus</title>
  </head>

  <body>
    <div>
      <h1>Customize Menus</h1>

      <h3>
        The <code>Menu</code> and <code>MenuItem</code> modules can be used to
        create custom native menus.
      </h3>

      <p>
        There are two kinds of menus: the application (top) menu and context
        (right-click) menu.
      </p>

      <p>
        Open the
        <a href="https://www.electronjs.org/docs/latest/api/menu"
          >full API documentation<span
            >(opens in new window)</span
          ></a
        >
        in your browser.
      </p>
    </div>

    <div>
      <h2>Create an application menu</h2>
      <div>
        <div>
          <p>
            The <code>Menu</code> and <code>MenuItem</code> modules allow you to
            customize your application menu. If you don't set any menu, Electron
            will generate a minimal menu for your app by default.
          </p>

          <p>
            If you click the 'View' option in the application menu and then the
            'App Menu Demo', you'll see an information box displayed.
          </p>

          <div>
            <h2>ProTip</h2>
            <strong>Know operating system menu differences.</strong>
            <p>
              When designing an app for multiple operating systems it's
              important to be mindful of the ways application menu conventions
              differ on each operating system.
            </p>
            <p>
              For instance, on Windows, accelerators are set with an
              <code>&</code>. Naming conventions also vary, like between
              "Settings" or "Preferences". Below are resources for learning
              operating system specific standards.
            </p>
            <ul>
              <li>
                <a
                  href="https://developer.apple.com/design/human-interface-guidelines/the-menu-bar"
                  >macOS<span
                    >(opens in new window)</span
                  ></a
                >
              </li>
              <li>
                <a
                  href="https://learn.microsoft.com/en-us/windows/apps/design/controls/menus-and-context-menus"
                  >Windows<span
                    >(opens in new window)</span
                  ></a
                >
              </li>
              <li>
                <a
                  href="https://developer.gnome.org/hig/patterns/controls/menus.html"
                  >Linux<span
                    >(opens in new window)</span
                  ></a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div>
      <h2>Create a context menu</h2>
      <div>
        <div>
          <div>
            <button id="context-menu">View Demo</button>
          </div>
          <p>
            A context, or right-click, menu can be created with the
            <code>Menu</code> and <code>MenuItem</code> modules as well. You can
            right-click anywhere in this app or click the demo button to see an
            example context menu.
          </p>

          <p>
            In this demo we use the <code>ipcRenderer</code> module to show the
            context menu when explicitly calling it from the renderer process.
          </p>
          <p>
            See the full
            <a
              href="https://www.electronjs.org/docs/latest/api/web-contents/#event-context-menu"
              >context-menu event documentation</a
            >
            for all the available properties.
          </p>
        </div>
      </div>
    </div>
    <script src="renderer.js"></script>
  </body>
</html>
